<? if ($c = stack('name')) {

	$d = component_data($c); 
	$s = component_settings($c);

?><style type="text/css">
.next, .prev { 
    /* absolute positioning relative to the overlay */ 
    position:absolute; 
    top:40%; 
 
    /* upcoming CSS3 rounded border feature */ 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
} 
 
/* progress indicator (animated gif). should be initially hidden */ 
.progress { 
    position:absolute; 
    top:45%; 
    left:50%; 
    display:none; 
} 
 
/* active thumbnail is raised on top of the mask using the z-index property */ 
.gallery-block a.active img { 
    outline:1px solid #000; 
    z-index:9999; 
    position:relative; 
}

.gallery-block {
	position:relative;
}

#content {position:relative}

</style>

<!-- overlay styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-basic.css"/>

<!-- gallery specific styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-gallery.css"/>


<?

?><script type="text/javascript">

jQuery(function($) {

	$("#footer").before($("#gallery-<?=$c?>-overlay"));

	$("#gallery-<?=$c?>-block a").overlay({ 
	 
		 // each trigger uses the same overlay with the id "gallery" 
		 target: '#gallery-<?=$c?>-overlay', 
	 
		 // optional exposing effect 
		 expose: {color:"#000", opacity:0.6},
		 loadSpeed: 300

	 
	// let the gallery plugin do its magic! 
	}).gallery({ 
	 
		 // the plugin accepts its own set of configuration options 
		 speed: 300 
	});

});
</script><?


	?><div id="gallery-<?=$c?>-block" class="gallery-block"><?

 	foreach($d as $im => $info) {	
	    ?><div class="container"><div class="wrapper"><a href="<?=FP_UPLOAD_PATH."$s[path]/$im"?>"><img src="<?=FP_UPLOAD_PATH."$s[path]/$info[tn]"?>" /></a></div></div><?
	} 
	
	?><div class="clearer"></div><?
	
	?></div><?
	
	?><div class="simple_overlay" id="gallery-<?=$c?>-overlay"> 
		 <!-- "previous image" action --> 
		 <a class="prev">&lt;</a> 
	 
		 <!-- "next image" action --> 
		 <a class="next">&gt;</a> 
	 
		 <!-- image information --> 
		 <div style="display:none"><div class="info"></div></div>
	 
		 <!-- load indicator (animated gif) --> 
		 <img class="progress" src="http://static.flowplayer.org/tools/img/overlay/loading.gif" /> 
	</div><?


 
	unstack();
} ?>